<template>
	<div class="shop_content conbox" id="shopcontent">
		<header class="header">
			<ul>
				<li @click="switchTab(index,item.statuse)" v-bind:class="actives == index ? 'active' : '' "
					v-for="(item,index) in navtab" :key="index">
					<p>{{item.tabtext}}</p>
					<p> ({{item.tabnum}})</p>
				</li>
			</ul>
			<div class="nav_rightop sebefore" v-bind:class="{'slectsdon':showstyle?'slectsdon': actives==5}"
				 @click="choosetab">
				<p>{{textsele}}</p>
				<p>({{alerday}})</p>
			</div>
		</header>
		<div class="content_list">
			<ul class="order_list">
				<li class="order_box" v-for="(item,index) in listcount" :key="index" >
					<p class="order_title">
						<span class="title_left">{{item.consignee}}</span>
						<span class="title_right">{{item.order_status}}</span>
					</p>
					<p class="order_num">
						<span class="title_left">{{item.add_time}}</span>
						<span class="title_right">{{item.order_sn}}</span>
					</p>
					<ul class="order_boxul">
						<li v-for="(items,indexs) in item.order_goods" :key="indexs" v-if="indexs<=1"
							@click="skipdegtail(item.order_id,item.user_id)">
							<div class="goods_img">
								<img :src="items.goods_thumb" alt/>
							</div>
							<div class="goods_msg">
								<view class="p_desc">
									<view class="beginwidth goods_name">
										{{items.goods_name}}
									</view>
									<view class="goods_price">{{items.goods_price}}</view>
								</view>
								<view class="p_desc">
									<view class="beginwidth">
										{{items.goods_sn}}
									</view>
									<view>X{{items.goods_number}}</view>
								</view>
							</div>
						</li>
						<li v-for="(items,indexd) in item.order_goods" :key="indexd"
							v-if="(indexd>1)&&(showstatus == true)"
							@click="skipdegtail(item.order_id,item.user_id)">
							<div class="goods_img">
								<img :src="items.goods_thumb" alt/>
							</div>
							<div class="goods_msg">
								<view class="p_desc">
									<view class="beginwidth goods_name">
										{{items.goods_name}}
									</view>
									<view class="goods_price">{{items.goods_price}}</view>
								</view>
								<view class="p_desc">
									<view class="beginwidth">
										{{items.goods_sn}}
									</view>
									<view>X{{items.goods_number}}</view>
								</view>
							</div>
						</li>
						<div class="show_all" v-on:click="showmore(index,$event,showstatus)"
						   v-if="(item.order_goods.length>2)&&(!showstatus)">
							展开所有({{item.order_goods_num}})
							<img :src="constant.imgUrl+'design/down.png'" alt/>
						</div>
						<div class="show_all" v-on:click="retract(index,$event,showstatus)"
						   v-if="(item.order_goods.length>2)&&(showstatus)">
							收起({{item.order_goods_num}})
							<img :src="constant.imgUrl+'design/up.png'" alt/>
						</div>
					</ul>
					<div class="goods_pricetotal">
						<p>
							共 <span>{{item.order_goods_num}}</span> 件，合计
							<span>￥{{item.total_amount}}</span>
						</p>
					</div>
				</li>
			</ul>
			<uniLoadMore  :status="loading"></uniLoadMore>
		</div>
		<uniPopup class="choosegoodst" maxHeight="100vh" width="100%" ref="goodsmask" @touchmove.stop.prevent="moveHandle" type="top">
			<ul>
				<li v-for="(item,index) in option1" :key="index" v-bind:class="isactive == index ? 'lion' : '' "
					@click="choose(item.text,item.value,index,item.num)">{{item.text}}({{item.num}})
				</li>
			</ul>
		</uniPopup>
	</div>
</template>

<script>
import { orderlist } from '@/api/materical'
import uniLoadMore from '@/components/uLi-load-more/uLi-load-more'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
	name: 'orderList',
	components: {
		uniLoadMore,
		uniPopup
	},
	data() {
		return {
			actives: 0,
			isactive: -1,
			navtab: [{ tabtext: '全部', tabnum: 0, statuse: -1 }, {
				tabtext: '待确认',
				tabnum: 0,
				statuse: 0
			}, { tabtext: '待付款', tabnum: 0, statuse: 100 }, { tabtext: '待发货', tabnum: 0, statuse: 101 }],
			value1: 102,
			value2: 'a',
			option1: [{ text: '已完成', num: 0, value: 102 }, { text: '付款中', num: 0, value: 1 }, {
				text: '取消', num: 0,
				value: 2
			}, { text: '无效', num: 0, value: 3 }, { text: '退货', num: 0, value: 4 }, { text: '待收货', num: 0, value: 6 }],
			suoyin: '',
			showstatus: false,
			textsele: '已完成',
			showstyle: false,
			tabIndex: 3,
			alerdystatys: 0,
			alerday: 0,
			page: 1,
			listcount: [],
			status: -1,
			constant: this.$constant,
			timer: null,
			loadingType: 0, // 定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			loading: ''
		}
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		this.actives = opcation.actives
		this.status = opcation.value
		this.isactive = opcation.style
		this.loadingType = 0
		this.getorderlist()
		uni.showLoading({
			title: '数据加载中'
		})
	},
	onPullDownRefresh() {
		this.getorderlist()
		this.loadingType = 1
		uni.showLoading({
			title: '数据刷新中'
		})
	},
	onReachBottom: function() {
		let that = this
		if (that.timer != null) {
			clearTimeout(that.timer)
		}
		that.timer = setTimeout(function() {
			that.loadingType = 2
			that.getgoodsmore()
		}, 1000)
		// this.getcasemore();
	},
	mounted() {

	},
	methods: {
		//  初始化数据
		getorderlist() {
			this.page = 1
			// this.loadingType = 0
			uni.showNavigationBarLoading()
			let data = {
				status: this.status,
				size: 5,
				page: this.page,
				type: ''
			}
			orderlist(data).then(res => {
				if (res.status == 'success') {
					let lists = res.data.lists.data
					let count = res.data.count
					this.navtab[0].tabnum = count.all
					this.navtab[1].tabnum = count.await_confirmed
					this.navtab[2].tabnum = count.await_pay
					this.navtab[3].tabnum = count.await_ship
					if (this.alerdystatys == 0) {
						this.alerday = count.received
					} else if (this.alerdystatys == 1) {
						this.alerday = count.paying
					} else if (this.alerdystatys == 2) {
						this.alerday = count.canceled
					} else if (this.alerdystatys == 3) {
						this.alerday = count.invalid
					} else if (this.alerdystatys == 4) {
						this.alerday = count.return
					} else if (this.alerdystatys == 5) {
						this.alerday = count.shipped
					}
					this.option1[0].num = count.received
					this.option1[1].num = count.paying
					this.option1[2].num = count.canceled
					this.option1[3].num = count.invalid
					this.option1[4].num = count.return
					this.option1[5].num = count.shipped
					if (lists.length > 0) {
						this.loading = ''
						this.listcount = lists
					} else {
						this.loading = 'nodata'
					}
					uni.hideNavigationBarLoading()
					uni.stopPullDownRefresh()
					uni.hideLoading()
				} else {
					this.msg(res.errors.message)
					uni.hideLoading()
				}
				this.hideloading()
			})
		},
		// 加载更多
		getgoodsmore() {
			this.page++
			if (this.loadingType !== 0) { // loadingType!=0;直接返回
				return false
			}
			this.loadingType = 1
			uni.showNavigationBarLoading()
			uni.showLoading({
				title: '数据加载中'
			})
			let data = {
				status: this.status,
				size: 5,
				page: this.page,
				type: ''
			}
			orderlist(data).then(res => {
				if (res.status == 'success') {
					this.loadingText = ''
					if (res.data.lists.data.length > 0) {
						let lists = res.data.lists.data
						this.listcount = this.listcount.concat(lists)
					} else {
						this.loading = 'nomore'
					}
					if (res.data.current_page == res.data.last_page) {
						this.loadingType = 2
						uni.hideNavigationBarLoading()
					}
				} else {
					uni.hideNavigationBarLoading()
					this.msg(res.message)
				}
				this.hideloading()
			})
		},
		// 消息提示封装
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		hideloading() {
			setTimeout(function() {
				uni.hideLoading()
			}, 500)
		},
		switchTab(index, statuse) {
			// 头部导航选择
			this.showstyle = false
			this.actives = index
			this.status = statuse
			this.page = 1
			this.listcount = []
			this.$refs.goodsmask.close()
			uni.showLoading({
				title: '数据加载中'
			})
			this.getorderlist() // 加载数据
		},
		choosetab() {
			// 筛选选项点击
			this.$refs.goodsmask.open()
			this.actives = 5
			this.showstyle = !this.showstyle
		},
		choose(text, value, index, num) {
			// 下拉框选择
			this.$refs.goodsmask.close()
			this.showstyle = false
			this.textsele = text
			this.status = value
			this.isactive = index
			this.page = 1
			this.listcount = []
			this.alerday = num
			this.alerdystatys = index
			this.getorderlist()
		},
		showmore(index, e, showstatus) {
		/*	var parent = e.target.parentNode.getAttribute('dabind')
			var newlist = this.listcount[parent].order_goods
			for (var i = 1; i < newlist.length; i++) {
				newlist[i].status = !newlist[i].status
				this.showstatus = newlist[i].status
			}
			this.listcount[parent].order_goods = newlist*/
			this.showstatus = true
		},
		retract() {
			this.showstatus = false
		},
		skipdegtail(order_id, user_id) {
			let query = {
				order_id: order_id,
				user_id: user_id
			}
			uni.navigateTo({
				url: `/pages/material/ordermanage/orderDetail${this.commonJS.queryData(query)}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.shop_content {
		height: 100%;
		width: 100%;
	}
	#shopcontent .header {
		text-align: unset;
		line-height: normal;
		height: 120px;
		width: 100%;
		z-index: 999999;
		position: fixed;
		background: white;
		/* border-bottom: 1px solid #ddd;*/
	}
	#shopcontent .header ul {
		display: block;
		float: left;
		height: 120px;
		width: 78%;
	}

	#shopcontent .header ul li {
		width: 23%;
		height: 100%;
		float: left;
		color: #999999;
		font-size: 26px;
		margin-left: 2%;
		text-align: center;
		line-height: normal;
		position: relative;
		background: white;
	}
	#shopcontent .header ul li p:first-child{
		margin-top: 15px;
	}
	#shopcontent .header ul li:first-child {
		margin-left: 0;
	}

	.nav_rightop {
		font-size:26px;
		float: right;
		line-height: normal;
		margin-right: 10px;
		height: 100%;
		color: #999999;
		text-align: center;
		position: relative;
		padding-right: 20px;
	}
	.nav_rightop p:first-child{
		margin-top: 15px;
	}
	.sebefore {
		background: url($imgUrl+'design/down.png') right center;
		background-repeat:no-repeat;
		background-size: 14px 8px;
	}

	.slectsdon {
		color: #333333;
		background: url($imgUrl+'design/up.png') right center;
		background-repeat:no-repeat;
		background-size: 14px 8px;
	}

	.slectsdon::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: calc(50% - 40px);
		width: 60px;
		height: 6px;
		background-color: #ffd11a;
		border-radius: 2px;
	}

	#shopcontent .active {
		color: #333333;
	}

	#shopcontent .active::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: calc(52% - 40px);
		width: 60px;
		height: 6px;
		background-color: #ffd11a;
		border-radius: 2px;
	}

	.select_down {
		float: right;
		position: absolute;
		line-height: 90px;
		right: 30px;
		background: url($imgUrl+'design/down.png') right center;
		background-repeat:no-repeat;
		background-size: 40px 40px;
	}

	.iconxiajiang {
		font-size: 12px;
		color: #666666;
	}

	.content_list {
		width: 100%;
		height: auto;
		position: absolute;
		margin-top: 120px;
		z-index: 0;
		padding-bottom: 30px;
		background: #F5F5F5;
	}

	.order_list {
		width: 90%;
		margin-left: 5%;
		height: auto;
		display: block;
	}

	.order_list .order_box {
		height: auto;
		width: 96%;
		border-radius: 20px;
		padding: 15px;
		display:inline-block;
		margin-top: 20px;
		background: -webkit-linear-gradient(#ffffff, #fdfdfd);
	}

	.order_title {
		font-size: 26px;
		margin-top: 15px;
		width: 100%;
		/*float: left;*/
		display:inline-block;
		margin-bottom: 20px;
		flex-direction:column-reverse;
	}

	.order_num {
		color: #999999;
	}

	.title_left {
		float: left;
	}

	.title_right {
		float: right;
	}

	.order_title .title_right {
		color: #ff6900;
	}

	.order_list li ul {
		margin-top: 32px;
		/* float: left;*/
		display:inline-block;
		width: 100%;
	}

	.order_boxul {
		/*border-bottom: 1px solid #ddd;*/
		padding-bottom: 10px;
	}

	.order_boxul li {
		width: 100%;
		height: auto;
		margin-top: 30px;
		/*float:left;*/
		display:inline-block;
		padding-bottom: 15px;
		border-bottom: 1px solid #ddd;
	}

	.order_boxul li:last-child {
		border-bottom: none;
	}

	.order_list li ul li .goods_img {
		width: 150px;
		height: 150px;
		float: left;
	}

	.goods_img img {
		float: left;
		width: 100%;
		height: 100%;
	}

	.goods_msg {
		float: left;
		margin-left: 10px;
		width: 75%;
	}

	.goods_msg .p_desc {
		width: 100%;
		float: left;
	}
	.goods_msg  .beginwidth{
		width: 60%;
		float: left;
		line-height: 30px;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 2;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.goods_name {
		font-size: 24px;
	}

	.goods_price {
		color: #333333;
		font-size: 26px;
	}

	.goods_msg .p_desc:nth-child(2) {
		margin-top: 20px;
		color: #999999;
		font-size: 22px;
	}

	.goods_msg .p_desc view:nth-child(2) {
		float: right;
	}

	.show_all {
		width: 240px;
		height: 50px;
		float: left;
		font-size: 26px;
		color: #666666;
		margin: 5% 0 0 32%;
		border-radius: 26px;
		text-align: center;
		line-height: 50px;
		background: #f5f5f5;
		position: relative;
	}

	.show_all img {
		float: right;
		width: 14px;
		height: 8px;
		top: 43%;
		right: 12%;
		position: absolute;
	}

	.goods_pricetotal {
		width: 100%;
		height: auto;
		/*float: left;*/
		display:inline-block;
		margin-top: 30px;
	}

	.goods_pricetotal p {
		float: right;
		font-size:26px;
		color: #999999;
	}

	.goods_pricetotal p span {
		color: #ff6900;
	}

	#shopcontent .van-pull-refresh {
		z-index: -1;
	}

	#shopcontent .van-list {
		z-index: 0;
	}

	#shopcontent .van-dropdown-menu {
		height: 86px;
		float: left;
		margin-left: 4%;
	}

	#shopcontent .van-dropdown-item {
		top: 90px;
		z-index: 99999;
		max-width: 1042px;
	}

	.choosegoodst {
		/*margin-top: 122px;*/
		/*width: 100%;*/
		/*height: 500px;*/
		/*background: white;*/
	}
	#shopcontent .choosegoodst ul{

	}
	#shopcontent .choosegoodst li {
		height: 80px;
		float: left;
		line-height: 80px;
		width: 100%;
		color: #999;
		font-size:26px;
		text-indent: 30px;
		border-bottom: 1px solid #dddddd;
	}

	.choosegoodst li:last-child {
		border: none;
	}

	.lion {
		font-weight: bold;
		color: #333333;
		background: url($imgUrl+'design/choosed.png') right 30px center;
		background-repeat:no-repeat;
		background-size: 30px 25px;
	}
	#shopcontent /deep/ .uni-popup__wrapper.top{
		top:120px;
		background: white;
	}
	#shopcontent /deep/ .uni-popup__wrapper-box .uni-popup__wrapper-box{
		width: 100%;
	}
</style>
